<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面练习</title>

    <!--内部样式-->
    <style>
        /*给body加背景图*/
        body {
            background-image: url(image/1.jpg);
        }

        /*给外边的div加样式*/
        #outer {
            width: 800px;
            height: 600px;
            background-color: white;
            border: 5px solid #dd1805;
            margin: 100px 270px;
        }

        /*给外边的div加样式*/
        #inner {
            width: 600px;
            height: 450px;
            background-color: white;
            /*这边边框等页面写完,就删除*/
            border: 1px solid red;
            margin: 70px 100px;
        }

        /*设置变通的颜色*/
        #s1 {
            color: blue;
        }

        #s2 {
            color: #808080;
        }

        /*设置表格位置*/
        table {
            margin: 30px 100px;
        }

        /*设置文本框的样式*/
        .inner_cls {
            width: 300px;
            margin: 5px;
            border-radius: 5px;
        }

        /*设置验证码文本块的样式*/
        .inner_cls_checkCode {
            width: 200px;
            margin: 5px;
            border-radius: 5px;
        }

        /*修改提交按钮的位置*/
        .submitForm {
            vertical-align: middle;
        }

    </style>
</head>
<body>
<!--绘制外边的div-->
<div id="outer">
    <!--绘制内部的div-->
    <div id="inner">
        <!--绘制标题-->
        <h3>
            <span id="s1">会员注册</span>&nbsp;&nbsp;&nbsp;
            <span id="s2">USER REGISTER</span>
        </h3>
        <!--添加一个form表单-->
        <form>
            <!--添加一个table表格-->
            <table>
                <!--第一行-->
                <tr>
                    <td>用户名</td>
                    <td><input type="text" name="username" placeholder="请输入用户名" class="inner_cls"/>></td>
                </tr>
                <!--第二行-->
                <tr>
                    <td>密码</td>
                    <td><input type="password" name="password" placeholder="请输入密码" class="inner_cls"/></td>
                </tr>
                <!--第三行-->
                <tr>
                    <td>确认密码</td>
                    <td><input type="text" name="repassword" placeholder="请再次输入密码" class="inner_cls/>"/></td>
                </tr>
                <!--第四行-->
                <tr>
                    <td>邮箱</td>
                    <td>
                        <input type="email" name="email" placeholder="请输入邮箱" class="inner_cls"/>
                    </td>
                </tr>
                <!--第五行-->
                <tr>
                    <td>性别</td>
                    <td>
                        <input type="radio" name="sex" value="male" checked="checked"/>男
                        <input type="radio" name="sex" value="female"/>女
                    </td>
                </tr>
                <!--第六行-->
                <tr>
                    <td>出生日期</td>
                    <td>
                        <input type="date" name="birthday" class="inner_cls"/>
                    </td>
                </tr>
                <!--第七行-->
                <tr>
                    <td>验证码</td>
                    <td>
                        <input type="text" name="checkCode" placeholder="请输入验证码" class="inner_cls_checkCode" ;/>
                        <!--实际开发中,验证码是通过代码绘制出来的-->
                        <img src="image/checkcode.jpg"/>
                    </td>
                </tr>
                <!--第八行-->
                <tr>
                    <td colspan="2" align="center">
                        <input type="image" src="image/btn.jpg" class="submitForm"/>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
</body>
</html>